<template>
    <view :style="{'--color': color}">
        <view class="mask flexac f-column">
            <view class="viewbox bgwhite bor_radius_20 padding40">
                <view class="d-flex m-bot30">
                    <view class="title flex-1 size30 thmeColor bold">{{ title }}</view>
                    <view class="d-flex a-center m-left20" @click="current = index" v-for="(item,index) in pageData.deliverys" :key="index">
                        <view class="fake-radio" :class="{'thmeBorder thmeBg': current == index}">
                            <text class="iconfont icon-xuanzhong size28"></text>
                        </view>
                        <view class="size28">{{ item == 1 ? '快递上门' : '门店自提' }}</view>
                    </view>
                </view>   

                <view class="color_33" v-if="pageData.deliverys[current] == 1">
                    <view class="size28 color_66">收货地址</view>
                    <view class="d-flex a-center m-top20 m-bot30" @click="toUrl('/orderPage/Addresslist/Addresslist')" v-if="Address.Aaddress"> 
                        <text class="iconfont icon-dingwei thmeColor m-right14"></text>
                        <view class="flex-1 m-right10">
                            <view>{{ Address.Aregion }}</view>
                            <view class="size30 bold">{{ Address.Aaddress }}</view>
                            <view>{{ Address.Aname }} {{ Address.Amobile }}</view>
                        </view>
                        <text class="iconfont icon-xiangyouxiayiye"></text>
                    </view>
                    <view class="unreceipt_addr" v-else>
                        <text class="unreceipt_addr_text" @click="toUrl('/orderPage/Addresslist/Addresslist')">添加收货地址</text>
                    </view>
                    
                    <view class="d-flex m-bot20">
                        <view class="flex-1 size28 color_66">配送门店</view>
                        <view class="padding4-20 thmeBg bor_radius_30 size26 white" @click="toStores">切换门店</view>
                    </view>
                    <block v-for="(item,index) in pageData.stores" :key="index">
                        <view class="p-left10 p-right10" v-if="item.shop_id == shop_id">
                            <view class="d-flex a-center m-bot20">
                                <view class="flex-1 size30 bold">{{ item.name }}</view>
                                <view class="size26 color_66">{{ item.distance }}km</view>
                            </view>
                            <view class="d-flex a-center">
                                <view class="flex-1 color_99">{{ item.address }}</view>
                                <text class="iconfont icon-wodeluxian" @click.stop="locate(item)"></text>
                            </view>
                        </view>
                    </block>
                    <view class="btn thmeBorder thmeColor bor_radius_10 flexac size32" @click="btnClick">{{ btnTxt }}</view>
                </view>  
                
                <view class="text-center" v-if="pageData.deliverys[current] == 2">
                    <view class="size26 color_99">请店员使用商户端扫码付款</view>
                    <image :src="$imgUrls(pageData.qrCodeImg)" class="code"></image>
                    <view class="size34 color_33">{{ pageData.sn_code }}</view>
                </view>
            </view>
            <text class="iconfont icon-guanbi size60" @click="close"></text>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        props: {
            pageData: {
                type: Object,
                default: () => {}
            },
            Address: {
                type: Object,
                default: () => {}
            },
            shop_id: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: '立即使用'
            },
            btnTxt: {
                type: String,
                default: '生成订单'
            }
        },
        data() {
            return {
                current: 0
            }
        },
        computed: {
            ...mapState(['color'])
        },
        methods: {
            toStores() {
                let ids = this.pageData.stores.map(item => item.shop_id)
                this.toUrl('/otherPage/custom/selectStore?shopsid=' + ids.join())
            },
            close() {
                this.$emit('close')
            },
            btnClick() {
                if(!this.Address.Aaddress) return this.$Toast('请添加收货地址')
                if(!this.shop_id) return this.$Toast('请选择配送门店')
                this.$emit('confirm')
            },
            locate(item) {
                uni.openLocation({
                    latitude: parseFloat(item.pointy),
                    longitude: parseFloat(item.pointx),
                    name: item.name,
                    address: item.address,
                    complete(res){
                        console.log(res)
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .title {
        position: relative;
        &::before {
            content: '';
            width: 6rpx;
            height: 30rpx;
            background: var(--color);
            position: absolute;
            left: -20rpx;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .btn {
        width: 340rpx;
        height: 76rpx;
        margin: 40rpx auto 10rpx;
    }
    .code {
        width: 360rpx;
        height: 360rpx;
        margin: 20rpx 0;
    }
</style>